<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap-3.1.1.min.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style-type: none;
        }

        body {
            font: 12px/180% Arial, Helvetica, sans-serif;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #3366cc;
            text-decoration: underline;
        }

        .demopage {
            width: 730px;
            margin: 0 auto;
        }

        .demopage h2 {
            font-size: 14px;
            margin: 20px 0;
        }

        /* scrollDiv */
        .scrollDiv {
            height: 25px; /* 必要元素 */
            line-height: 25px;
            border: #ccc 1px solid;
            overflow: hidden; /* 必要元素 */
        }

        .scrollDiv li {
            height: 25px;
            padding-left: 10px;
        }

        #s2, #s3 {
            height: 100px;
        }

        span {
            font-size: 15px;
        }

        h1 {
            display: inline-block;
        }

        .goods {
            width: 50%;
            /*text-align: center;
            margin: 50px auto;*/
        }

        .goods h1 {
            animation: myfirst 2s infinite;
        }

        @keyframes myfirst {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(0px, -10px);
            }
            100% {
                transform: translate(0px, 0px);
            }
        }
    </style>
</head>
<body>
<h1><a href="index.jsp" style="text-decoration:none;">&nbsp;华为商城</a>
    <small>&nbsp;抽奖</small>
</h1>
<div class="container my-3">
    <div class="row jumbotron">
        <div class="col"></div>
        <div class="col-4 text-center">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title"><span style="font-weight:bold;font-size:18px;color:darkblue">抽奖系统</span></h4>
                    <br>
                    <button id="start" type="button" class="btn btn-success btn-lg">开始</button>
                    &nbsp;&nbsp;
                    <button id="stop" type="button" class="btn btn-danger btn-lg">停止</button>
                    &nbsp;&nbsp;
                    <button id="fresh" type="button" class="btn btn-warning btn-lg">刷新</button>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="container">
    <div class="col-md-6 goods" style="font-size:15px;">
        <div class="row-md-1"><h1 style="font-weight:bold;font-size:18px;color:darkblue">活动规则</h1></div>
        <br>
        <div class="row-md-1">1.活动时间:2021年3月20日00:00-4月20日23:59</div>
        <br>
        <div class="row-md-1">2.活动规则:活动期间用户登陆华为商城帐号，进入活动页面，点击参与抽奖，同一帐号每天有3次免费抽奖机会</div>
        <br>
        <div class="row-md-1">3.奖品设置: ...</div>
        <br>
        <div class="row-md-1">
            <btn class="btn btn-primary btnjs"><span>更多详情请点击</span></btn>
        </div>
    </div>
    <div class="col-md-3 goods">
        <h1 style="font-weight:bold;font-size:18px;color:darkblue">中奖名单</h1>
        <br>
        <div class="scrollDiv" id="s3" style="border:0;">
            <ul>
                <li><span>139****1677 抽中 华为智能跑步机</span></li>
                <li><span>186****2830 抽中 华为智能体脂秤</span></li>
                <li><span>155****6708 抽中 Sound 智能音箱</span></li>
                <li><span>177****5151 抽中 华为AI音箱</span></li>
                <li><span>159****5727 抽中 华为路由AX3 Pro</span></li>
                <li><span>156****7981 抽中 华为智能跑步机</span></li>
                <li><span>139****6694 抽中 海备思高清无线投屏器</span></li>
                <li><span>189****6652 抽中 华为智能跑步机</span></li>
                <li><span>157****2114 抽中 Watch GT 2 Pro</span></li>
                <li><span>158****2712 抽中 华为智能休脂秤</span></li>
                <li><span>138****2673 抽中 华为手环 B6</span></li>
                <li><span>139****8930 抽中 华为AI音箱</span></li>
            </ul>
        </div>
        <!--<span id="btn1" style="color: #F8893E">向上滚动</span>&nbsp;&nbsp;<span id="btn2"
                                                                              style="color: #F8893E">向下滚动</span>-->
    </div>
</div>


<div class="dialog" style="width:700px;height:555px;background-color:#F0F8FF;
position:absolute;left:26%;top:16%;display: none;border-radius:25px;opacity: 0.84;">
    <h1 style = "margin-left:272px;color:darkviolet">活动规则</h1>
    <hr>
    <div class = "container">
        <div class = "row-md-1">
            <span>1、活动时间：2021年3月1日00:00-3月31日23:59</span>
        </div>
        <br>
        <div class = "row-md-1">
            <span>2、活动规则：活动期间用户登陆华为商城帐号，进入活动页面，点击参与抽奖，同一帐号每天</span>
        </div>
        <div class = "row-md-1">
            <span>有3次免费抽奖机会。</span>
        </div>
        <br>
        <div class = "row-md-1">
            <span>3、奖品设置</span>
            <div class = "row-md-1">&nbsp;&nbsp;&nbsp;一等奖（1张） 国内任意飞机票 1张</div>
            <div class = "row-md-1">&nbsp;&nbsp;&nbsp;二等奖（5份） usmile智能声波电动牙刷 1个</div>
            <div class = "row-md-1">&nbsp;&nbsp;&nbsp;三等奖 （6份） 蓓慈智能足浴器 1个</div>
            <div class = "row-md-1">&nbsp;&nbsp;&nbsp;四等奖（10份） 华为mini蓝牙音箱（颜色随机） 1个</div>
            <div class = "row-md-1">&nbsp;&nbsp;&nbsp;五等奖（20份） 华为自拍杆（颜色随机） 1个</div>
            <div class = "row-md-1">&nbsp;&nbsp;&nbsp;六等奖（50份） 华为智选欧普小夜灯 1个</div>
            <div class = "row-md-1">&nbsp;&nbsp;&nbsp;幸运奖 （50,000份） 莫塞尔品牌5元优惠券，可见优惠券使用提示；</div>
        </div>
        <br>
        <div class = "row-md-1">
            <span>4、奖品发放：用户抽奖完毕后即在本抽奖活动页面被告知抽奖结果。</span>
        </div>
        <div class = "row-md-1">
            <span>实物中奖用户将会收到消息通知，如因用户原因导致奖品发放失败的视为自动放弃奖品。</span>
        </div>
        <hr>
        <div class = "row-md-1" style = "margin-left:272px;">
            <a href="#" type="button" class="btn btn-primary btn-lg" id="close">知道了</a>
        </div>
    </div>
</div>

<!--当点击停止时，会提示进行判断 谢谢参与还是其他奖品-->
<div class = "dialog_stop" style="width:200px;height:90px;background-color:#F0F8FF;position:absolute;left:21%;top:16%;display: none;border-radius:16px;">
    <h1></h1>
</div>

<script type="text/javascript">
    $(".btnjs").click(function () {
        $(".dialog").show(200)
    });

    $("#close").click(function () {
        $(".dialog").hide()
    });
</script>

<!--随机抽奖-->
<script type="text/javascript">
    var timer;
    var number = 0;
    var items = ["华为智能休脂秤", "谢谢参与", "Sound 智能音箱", "谢谢参与", "Watch GT 2 Pro", "华为手环 B6", "谢谢参与", "华为AI音箱", "华为路由AX3 Pro",
        "全效空气净化器", "谢谢参与", "谢谢参与", "海备思高清无线投屏器", "谢谢参与", "家用智能跑步机"];

    window.onload = function () {
        var container = document.querySelector(".card-title"),
            start = document.getElementById("start"),
            stop = document.getElementById("stop"),
            fresh = document.getElementById("fresh");

        //事件调用
        start.onclick = play;
        stop.onclick = end;
        fresh.onclick = refresh;

        //添加回车键和空格键事件事件，摁下回车开始，再次摁下结束，空格键如此;
        document.onkeyup = function (event) {
            event = event || window.event;
            //console.log(event.keyCode);
            if (event.keyCode == 13 || event.keyCode == 32) {
                if (number == 0) {
                    play();
                    number = 1;
                } else {
                    end();
                    number = 0;
                }
            }
        }

        //开始函数
        function play() {
            clearInterval(timer);
            timer = setInterval(function () {
                var item = Math.floor(Math.random() * items.length);
                container.innerHTML = items[item];
                //console.log(item);
            }, 100);
            start.classList.remove("btn-success");
            start.classList.add("btn-primary");
            stop.classList.add("btn-danger");
        }

        //停止函数
        function end() {
            clearInterval(timer);
            stop.classList.remove("btn-danger");
            stop.classList.add("btn-info");
            start.classList.remove("btn-primary");
            start.classList.add("btn-success");
        }

        //刷新函数
        function refresh() {
            window.location.reload();
        }
    }
</script>

<!--中奖名单 文字滚动-->
<script type="text/javascript">
    //滚动插件
    (function ($) {
        $.fn.extend({
            Scroll: function (opt, callback) {
                //参数初始化
                if (!opt) var opt = {};
                var _this = this.eq(0).find("ul:first");
                var lineH = _this.find("li:first").height(), //获取行高
                    line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
                    speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒）
                    timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒）
                if (line == 0) line = 1;
                var upHeight = 0 - line * lineH;
                //滚动函数
                scrollUp = function () {
                    _this.animate({
                        marginTop: upHeight
                    }, speed, function () {
                        for (i = 1; i <= line; i++) {
                            _this.find("li:first").appendTo(_this);
                        }
                        _this.css({
                            marginTop: 0
                        });
                    });
                }
                //鼠标事件绑定
                _this.hover(function () {
                    clearInterval(timerID);
                }, function () {
                    timerID = setInterval("scrollUp()", timer);
                }).mouseout();
            }
        });
    })(jQuery);

    $(document).ready(function () {
        $("#s2").Scroll({
            line: 4,
            speed: 500,
            timer: 4000
        });
    });
</script>

<script type="text/javascript">
    (function ($) {
        $.fn.extend({
            Scroll: function (opt, callback) {
                //参数初始化
                if (!opt) var opt = {};
                var _btnUp = $("#" + opt.up); //Shawphy:向上按钮
                var _btnDown = $("#" + opt.down); //Shawphy:向下按钮
                var timerID;
                var _this = this.eq(0).find("ul:first");
                var lineH = _this.find("li:first").height(), //获取行高
                    line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
                    speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷动速度，数值越大，速度越慢（毫秒）
                timer = opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
                if (line == 0) line = 1;
                var upHeight = 0 - line * lineH;
                //滚动函数
                var scrollUp = function () {
                    _btnUp.unbind("click", scrollUp); //Shawphy:取消向上按钮的函数绑定
                    _this.animate({
                        marginTop: upHeight
                    }, speed, function () {
                        for (i = 1; i <= line; i++) {
                            _this.find("li:first").appendTo(_this);
                        }
                        _this.css({
                            marginTop: 0
                        });
                        _btnUp.bind("click", scrollUp); //Shawphy:绑定向上按钮的点击事件
                    });

                }
                //Shawphy:向下翻页函数
                var scrollDown = function () {
                    _btnDown.unbind("click", scrollDown);
                    for (i = 1; i <= line; i++) {
                        _this.find("li:last").show().prependTo(_this);
                    }
                    _this.css({
                        marginTop: upHeight
                    });
                    _this.animate({
                        marginTop: 0
                    }, speed, function () {
                        _btnDown.bind("click", scrollDown);
                    });
                }
                //Shawphy:自动播放
                var autoPlay = function () {
                    if (timer) timerID = window.setInterval(scrollUp, timer);
                };
                var autoStop = function () {
                    if (timer) window.clearInterval(timerID);
                };
                //鼠标事件绑定
                _this.hover(autoStop, autoPlay).mouseout();
                _btnUp.css("cursor", "pointer").click(scrollUp).hover(autoStop, autoPlay); //Shawphy:向上向下鼠标事件绑定
                _btnDown.css("cursor", "pointer").click(scrollDown).hover(autoStop, autoPlay);

            }
        })
    })(jQuery);

    $(document).ready(function () {
        $("#s3").Scroll({
            line: 4,
            speed: 500,
            timer: 2000,
            up: "btn1",
            down: "btn2"
        });
    });

</script>

<script type="text/javascript">
    function AutoScroll(obj) {
        $(obj).find("ul:first").animate({
            marginTop: "-25px"
        }, 500, function () {
            $(this).css({
                marginTop: "0px"
            }).find("li:first").appendTo(this);
        });
    }

    $(document).ready(function () {
        setInterval('AutoScroll("#s1")', 3000);
    });
</script>
</body>
</html>